<nz-drawer
  nzClosable="false"
  i18n-nzTitle="@@upload"
  nzTitle="Upload"
  [nzVisible]="visible"
  [nzExtra]="extra"
  nzPlacement="right"
  [nzWidth]="500"
  (nzOnClose)="onClose()">
  <ng-container *nzDrawerContent>
    <nz-spin [nzSpinning]="isUploading" i18n-nzTip="@@Uploading" nzTip="Uploading...">
      <div class="upload-drawer-layout">
        <nz-alert nzType="warning" [nzMessage]="notice">
          <ng-template #notice>
            <div style="font-size: 14px;">
              <i style="font-size: 16px; color: #4F5B67; margin-right: 4px" nz-icon nzType="icons:icon-info-outline"></i>
              <ng-container i18n="@@data-upload-warning">For users, only insert/update operations will be executed; For user properties, only insert operation will be executed.</ng-container>
            </div>
          </ng-template>
        </nz-alert>
        <div>
          <ng-container i18n="@@select-file-to-upload">Please select the file to upload (only support JSON file).</ng-container>&nbsp;
          <a class="template-link" href="assets/upload-end-users.json" target="_blank" i18n="@@check-template">Click to view the template</a>
        </div>
        <nz-upload
          [nzAccept]="['application/json']"
          nzFileType="application/json"
          [nzAction]="uploadUrl"
          (nzChange)="handleChange($event)">
          <button nz-button>
            <i nz-icon nzType="icons:icon-upload"></i>
            <ng-container i18n="@@select-upload-file">Select and upload file</ng-container>
          </button>
        </nz-upload>
      </div>
    </nz-spin>
  </ng-container>
  <ng-template #extra>
    <i (click)="onClose()" nz-icon nzType="icons:icon-close"></i>
  </ng-template>
</nz-drawer>

